<script lang="ts">
import { $ } from '@/utils/tools';
import GraphMenu from './GraphMenu.vue';
import GraphHalper from './graphHalper';
// import { Options, Vue } from 'vue-class-component';
import { defineComponent, onMounted, createVNode, ref, Ref, Fragment, openBlock, createBlock, Teleport, resolveComponent, getCurrentInstance } from 'vue';

// @Options({})
// export default class Home extends Vue {}
// type ElementType = ComponentPublicInstance | HTMLElement | null

export default defineComponent({
  name: 'Home',

  components: { GraphMenu },

  setup(prop, ctx) {
    // const vue = getCurrentInstance();

    const homeRef: Ref<ElementType> = ref(null);

    const graph: Ref<GraphHalper> = ref(null as any);

    const isShowMenu = ref(false);

    const menuMap = ref({
      x: 0,
      y: 0,
    });

    onMounted(() => {
      graph.value = new GraphHalper($(homeRef) as HTMLElement);

      $(graph).onBlankContextmenu(({ e, x, y, cell, view }: any) => {
        // const { e, x, y, cell, view } = params;
        // console.log(e, x, y, cell, view);
        isShowMenu.value = true;
        menuMap.value = { x, y };
        // console.log(menuMap.value);
        // console.log($(isShowMenu));

        $(graph).addNode('image', { x, y });
      });
    });

    return {
      graph,
      homeRef,
      menuMap,
      isShowMenu,
    };
  },

  render() {
    const { isShowMenu, menuMap } = this;
    const menu = resolveComponent('GraphMenu');

    return createVNode(Fragment, null, [
      createVNode('div', {
        class: ['home'],
        ref: 'homeRef',
      }),
      createVNode(Teleport as any, {
        to: 'body',
        disabled: false,
      }, [
        (openBlock(), createBlock(menu, {
          isShowMenu,
          menuMap,
        }, null)),
      ]),

    ])
    ;
  },
});
</script>
